import React, { Component } from 'react';
import {observer} from 'mobx-react';
import PropTypes from 'prop-types';
import { Input,Tooltip,Modal } from 'antd';
import { Link } from 'react-router-dom';
import model from './login_model';
import './login_styles.less';
import routerConf from '../../conf/routerConf';
import history from '../../utils/history';
@observer
class Index extends Component {
  constructor(props) {
    super(props);
    model.view = this;
  }
  static propTypes = {
    title:PropTypes.string,
    hidden:PropTypes.func,
    visible:PropTypes.bool,
    onChange:PropTypes.func
  }
  componentDidMount(){
    model.init();
  }
  refreshRandCode = () => {
    model.getCapcha();
  }
  render() {
    return (
      <div className="login-modal-container">
        <Modal
          title={this.props.title||"登录"}
          visible={this.props.visible||false}
          okText="登录"
          cancelText="取消"
          onCancel={()=>{
            model.setEmpty();
            if (this.props.hidden) {
              this.props.hidden();
            }
          }}
          onOk={async ()=>{
            await model.login().then((res)=>{
              let userInfo = res;
              if (this.props.onChange) this.props.onChange(userInfo);
            });
          }}
        >
            <Tooltip title="请输入用户名">
              <Input 
                style={{marginBottom:10}}
                value={model.username} 
                onChange={(e)=>{
                  model.setUsername(e.target.value);
                }}
                placeholder="请输入用户名"
              />
            </Tooltip>
            <Tooltip title="请输入用户密码">
              <Input 
                style={{marginBottom:10}}
                value={model.password} 
                type="password"
                onChange={(e)=>{
                  model.setPassword(e.target.value);
                }}
                placeholder="请输入用户密码"
              />
            </Tooltip>
            <div className="captcha-code" style={{display:'flex',alignItems:'center',justifyContent:'space-between',marginBottom:10}}>
              <Input 
                style={{marginRight:20}}
                value={model.captchaCode} 
                placeholder="请输入验证码"
                onChange={(e)=>{
                  model.setCaptchaCode(e.target.value);
                }}/>
              <div ref={(ref)=>model.captchaBox = ref} style={{display:'inline-block',verticalAlign:'middle'}} onClick={model.getCapcha}/>
            </div>
            <div className="toReg">
            <Link to={routerConf.register.path}>注册账户</Link>
          </div>
        </Modal>
      </div>
    );
  }
}

export default Index;
